<!--
  author: tangcheng_cd
  create by: 2018/5/31
  descr: 用户角色设置
-->
<template>
  <el-dialog
    title="设置角色"
    :visible.sync="visiable"
    class="user-role-Setting"
    @close="ardCancelBtnClick"
    width="580px">
    <!--
    :props="{
      key: 'value',
      label: 'desc'
    }"
  -->
    <el-transfer
      v-model="userRoles"
      :props="{
        key: 'id',
        label: 'name'
      }"
      :titles="['未分配角色', '已分配角色']"
      :data="allRoles">
    </el-transfer>

    <span slot="footer" class="dialog-footer">
      <el-button @click="loadData(curUser)" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submit" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from '../../../api/url'
import ajax from '../../../api/ajax'
import Msg from '../../../assets/js/msg'

export default {
  name: 'user-role-setting',
  data () {
    return {
      visiable: false, // 是否显示设置面板
      allRoles: [],
      userRoles: [],
      curUser: {}, // 当前设置角色用户
      loadStatus: { // 加载状态
        userRolesLoad: false,
        allRolesLoad: false
      }
    }
  },
  methods: {
    // 显示设置面板
    show (curUser) {
      this.visiable = true
      this.curUser = curUser
      this.loadData(curUser)
    },
    // 关闭设置面板
    close () {
      this.visiable = false
      this.curUser = {}
      this.allRoles = []
      this.userRoles = []
    },
    // 获取所有的角色
    getAllRoles () {
      this.loadStatus.allRolesLoad = false
      ajax.post(api.GET_SYS_ROLES).then(res => {
        this.allRoles = res.data
        this.loadStatus.allRolesLoad = true
        this.$emit('allRolesLoaded')
      }).catch(e => {
        console.error('获取所有角色数据发生错误！')
      })
    },
    // 获取用户的角色
    getUserRoles (curUser) {
      this.loadStatus.userRolesLoad = false
      ajax.post(api.GET_USER_ROLES, curUser).then(res => {
        let resData = res.data
        this.userRoles = resData.map(item => item.id)
        this.loadStatus.userRolesLoad = true
        this.$emit('userRolesLoaded')
      }).catch(e => {
        console.error('获取用户角色数据发生错误！')
      })
    },
    // 载入数据
    loadData (curUser) {
      this.getAllRoles()
      this.getUserRoles(curUser)
      this.$on(['allRolesLoaded', 'userRolesLoaded'], () => {
        // 用户角色和所有角色都加载完毕
        if (this.loadStatus.userRolesLoad && this.loadStatus.allRolesLoad) {
          this.$emit('loaded', this.allRoles, this.userRoles)
        }
      })
    },
    // 提交数据
    submit () {
      let postData = {
          userVO: this.curUser,
          roleIds: this.userRoles
      }
      ajax.post(api.SET_SYS_USER_ROLES, postData).then(res => {
        Msg.alert('角色分配成功！')
      }).catch(e => {
        console.error('提交设置系统用户角色数据请求发生错误！')
      })
    },
    // 取消
    ardCancelBtnClick () {
      this.curUser = {}
      this.allRoles = []
      this.userRoles = []
      this.visiable = false
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // 数据默认值恢复
      let isRootSwitchAbled = this.formData.isRootSwitchAbled
      this.formData = JSON.parse(JSON.stringify(this.formInitData))
      this.formData.isRootSwitchAbled = isRootSwitchAbled
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.user-role-Setting
  .el-transfer
    padding-left 20px
</style>
